import { Form, Checkbox, Radio, Space, Button, Input } from "antd";
import React from "react";
import GoBack from "@/components/TheGoBack";
import "../style/style.less";
import TheUpload from '@/components/TheUpload'

const { TextArea } = Input;

class Add extends React.Component {
  state = {
    tagsValue: [],
    tags: [
      {
        label: "已消毒",
        value: 1,
        disabled: false,
      },
      {
        label: "造型专业",
        value: 2,
        disabled: false,
      },
      {
        label: "已打疫苗",
        value: 3,
        disabled: false,
      },
    ],
    radioValue: "1",
  };
  tagsChange = (value) => {
    this.setState({ tagsValue: value }, () => {
      let { tags, tagsValue } = this.state;
      if (tagsValue.length === 2) {
        this.setState({
          tags: tags.map((v) => {
            return {
              ...v,
              disabled: !tagsValue.includes(v.value),
            };
          }),
        });
      } else {
        this.setState({
          tags: tags.map((v) => {
            return {
              ...v,
              disabled: false,
            };
          }),
        });
      }
    });
  };
  radioChange = (e) => {
    this.setState({ radioValue: e.target.value });
  };
  setNewsContent = () => { };
  render() {
    const { tagsValue, tags, radioValue } = this.state;
    return (
      <div className="p-layout-box pet-add-box">
        <div className="p-search-box" style={{ marginTop: -20 }}>
          <GoBack history={this.props.history} title="发布动态" />
        </div>
        <div className="p-layout-content">
          <Form>
            <div className="title">选择标签(非必填)</div>
            <Form.Item label="宠圈标签">
              <Checkbox.Group options={tags} onChange={this.tagsChange} />
              {`${tagsValue.length}/2`}
            </Form.Item>
            <Form.Item label="是否置顶">
              <Radio.Group onChange={this.radioChange} value={radioValue}>
                <Radio value={"1"}>否</Radio>
                <Radio value={"2"}>是</Radio>
              </Radio.Group>
            </Form.Item>
            <div className="title">正文</div>
            <Form.Item>
              <div style={{ width: 1200, margin: '0 auto' }}>
                <TextArea autoSize={{ minRows: 6, maxRows: 6 }} maxLength={50} allowClear showCount />
              </div>
            </Form.Item>
            <div className="title">新增</div>
            <Form.Item>
              <TheUpload getFileResult={this.getFileResult} maxSize={10} len={4} />
            </Form.Item>
            <Form.Item>
              <div style={{ display: "flex", justifyContent: "center" }}>
                <Space>
                  <Button>取消</Button>
                  <Button type="primary">保存</Button>
                </Space>
              </div>
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  }
}

export default Add;
